<template>
  <div>
    <div id="blackhead">
      <div id="register">
        <router-link to="/">
        <a class="login" href="#" style="margin-right: 980px">
          <i class="el-icon-s-home" style="font-size: 18px"></i>
          返回首页
        </a>
        </router-link>
        <span style="margin-right:1px">|</span>
        <span v-if="dat==null">
          <a class="login" href="#">登录</a>
          <a class="login" href="#">注册</a>
          <a class="login" href="#">讲师招募</a>
        </span>
        <span v-else>
          <!--<a class="login" href="#">讲师招募</a>-->
          <el-link  class="login">讲师招募</el-link>
          <el-link @click="quit()" class="login">退出</el-link>
        </span>
      </div>
    </div>
    <div style="background-color: #F5F5F5;">
      <div id="top">
        <div id="big">
          <a id="bofangqi" href=""><img src="../assets/bofangqi.png"/> 查看免费录播课程</a>
          <div id="title">超级会员 (SVIP) 享专属特权</div>
          <div id="titlenext">海量课程专享，付费课程免费学习，超低折扣课程，资源随心下，一切只为助力您的学习成长。</div>
          <div id="privilege">
            <div class="privilegediv">
              <img src="../assets/32.png"/><div class="privilege_title">免费课程</div><div class="privilege_titlenext">专属课程免费看</div>
            </div>
            <div class="privilegediv">
              <img src="../assets/33.png"/><div class="privilege_title">超低折扣</div><div class="privilege_titlenext">购买课程最低5折起</div>
            </div>
            <div class="privilegediv">
              <img src="../assets/34.png"/><div class="privilege_title">活动专享</div><div class="privilege_titlenext">平台活动可以折上折</div>
            </div>
          </div>
          <div id="card">
            <img id="card_one" src="../assets/35.png"/>
            <div id="card_year">
              <img id="card_two" src="../assets/zuo.png"/>
              <div id="card_buy">
                <p id="buy_one">超级会员</p>
                <p id="buy_two">有效期为永久</p>
                <p id="buy_three">￥199 <del>￥299</del></p>
                <button @click="buy">立即购买</button>
              </div>
            </div>
            <div id="explain">
              <p id="explain_title">会员权益与服务说明</p>
              <p class="explain_content">1、会员有效期内可免费学习会员免费课。</p>
              <p class="explain_content">2、会员有效期：年度会员有效期为一年（365天），超级会员有效期为永久。</p>
              <p class="explain_content">3、会员折扣：会员有效期内，购买学院付费课程可享有对应会员折扣。 </p>
              <p class="explain_content">4、会员到期：自购买之日起，所购会员对应的权益随会员过期自动到期，临近到期您可进行会员续费。 </p>
              <p class="explain_content">5、会员续费：当前会员未到期进行续费的用户，权益和有效期自动顺延。 </p>
              <p class="explain_content">6、会员属于虚拟商品，一经售出，不予退费。 </p>
              <p class="explain_content">7、禁止用户使用任何方式利用本站资源为他人提供有偿服务，一经发现，本站有权查封该账号并追究法律责任。 </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div><Bottom></Bottom></div>
    <!--弹出层-->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="30%">

        <table width="100%" style="text-align: center">
          <tr style="background-color: #F5F5F5;">
            <th width="50%">购买信息</th>
            <th>价格</th>
          </tr>
          <tr valign="top">
            <td height="100px">学院会员永久使用</td>
            <td style="color: red;">￥199</td>
          </tr>
          <tr align="left">
            <td colspan="2" height="50px">备注：<input type="text" style="width:90%;border:none"/></td>
          </tr>
          <tr align="left">
            <td colspan="2" height="80px">
              <!--<div >-->
                <img style="border: 1px solid #EC7F00;" src=""/>
              <!--</div>-->
            </td>
          </tr>
          <tr>
            <td colspan="2"><button @click="nextStep" style="background-color: #D51423;color: white;width: 150px;height: 30px">下一步</button></td>
          </tr>
        </table>

    </el-dialog>
  </div>

</template>

<script>
    import Bottom from "./Bottom";
    import qs from 'qs'
    export default {
        name: "SVIP",
        components: {Bottom},
      data(){
          return{
            dat:sessionStorage.getItem('user')==null,
            dialogVisible:false
          }
      },
      created(){
        //根据uid查询用户svip状态

      },
      methods:{
        //根据uid查询用户svip状态 如果状态改变，就跟跟着改变issvip
        /*getAndUpd(){
          this.$axios2.post("order/user/getAndUpd",qs.stringify({uid:sessionStorage.getItem("uid")})).then(r=>{
              sessionStorage.setItem("issvip",r.data)
          })
        },*/
        quit(){
          window.sessionStorage.clear();
          this.$router.push('/login2')
        },buy(){
          let uid=sessionStorage.getItem("uid");
          //判断用户是否登录
          if (uid==null || uid==""){
            this.$message.error("请先登录再来！！！")
          }else {
            //判断用户是否已经是vip
           this.$axios2.post("order/user/getOneUser",qs.stringify({uid:uid})).then(r=>{
             sessionStorage.setItem("issvip",r.data);
             if (r.data==1){
               this.$message.warning("您已经是尊贵的VIP用户了！！！")
             } else {
               this.dialogVisible=true;
             }
           })
          }
        },
        //确定购买
        nextStep(){
          let dd={
            orderno:new  Date().getTime(),
            money:199,
            userid:sessionStorage.getItem("uid")
          }
          let temp=document.createElement("form");
          temp.action="http://localhost:8898/order/toPaySVip";
          temp.method="post";
          temp.style.display="none";
          for (let ddKey in dd) {
            let opt=document.createElement("textarea");
            opt.name=ddKey;
            opt.value=dd[ddKey];
            temp.appendChild(opt);
          }
          document.body.appendChild(temp);
          temp.submit();
          return temp;
        }
      }

    }
</script>

<style scoped>
  input:focus{
    outline: none;
  }
  a{
    text-decoration:none;
  }
  #blackhead{
    border: 1px solid #333333;
    background-color: #333333;
    color: #CCCCCC;
    font-size: 12px;
    height: 25px;
    width: 100%;
  }
  #register{
    width: 1200px;
    margin: auto;
    line-height: 25px;
    text-align: right;
  }
  .login{
    margin: 0 5px;
    text-decoration:none;
    color: #CCCCCC;
  }
  .login:hover{
    color: white;
  }
  #top{
    width: 1890px;
    height: 900px;
    margin: auto;
    background-image: url("../assets/SVIP.png");
    background-repeat: no-repeat;
  }
  #big{
    width: 1200px;
    height: 900px;
    margin: auto;
  }

  .el-dialog__body {
    padding: 0px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  #bofangqi{
    width: 137px;
    height: 36px;
    padding: 0 10px;
    background: #5E5351;
    border-radius: 6px;
    position: relative;
    top:15px;
    left: 950px;
    font-size: 14px;
    line-height: 36px;
    display: block;
    color: #CB9F6D;
  }
  #bofangqi img{
    position: relative;
    top: 5px;
    width: 20px;
  }
  #title{
    margin-top: 30px;
    font-size: 36px;
    color: #D1B388;
    text-align: center;
  }
  #titlenext{
    margin-top: 30px;
    font-size: 14px;
    color: #D1B388;
    text-align: center;
  }
  #privilege{
    width: 480px;
    height: 115px;
    margin: auto;
    margin-top: 50px;
  }
  .privilegediv{
    width: 120px;
    height: 115px;
    margin: 0 20px;
    float: left;
    text-align: center;
  }
  .privilegediv img{
    width: 50px;
    height: 50px;
    margin: 0 35px 15px 35px;
  }
  .privilege_title{
    font-size: 16px;
    color: white;
  }
  .privilege_titlenext{
    font-size: 12px;
    margin-top: 5px;
    color: #ca9e70;
  }
  #card{
    width: 890px;
    margin: auto;
    margin-top: 10px;
  }
  #card_one{
    width: 300px;
    height: 213px;
  }
  #card_year{
    width: 590px;
    height: 152px;
    padding: 30px 0;
    background-color: #CA9E70;
    float: right;
  }
  #card_two{
    width: 248px;
    height: 155px;
    margin-left: 40px;
    float: left;
  }
  #card_buy{
    width: 200px;
    height: 135px;
    padding: 14px 20px 6px 20px;
    background-color: white;
    float: left;
  }
  #buy_one{
    font-size: 20px;
    color: #666;
    margin: 0;
  }
  #buy_two{
    font-size: 12px;
    color: #999;
    margin-bottom: 0;
  }
  #buy_three{
    font-size: 20px;
    color: #ca9e70;
    margin:10px 0 5px 0;
  }
  #buy_three del{
    font-size: 14px;
    color: #999;
  }
  #card_year button{
    width: 200px;
    height: 36px;
    border-radius: 6px;
    border: 0;
    background-color: #CA9E70;
    color: white;
  }
  #explain{
    width: 870px;
    height: 300px;
    padding-left: 20px;
    margin-top: 20px;
    background-image: url("../assets/36.png");
  }
  #explain_title{
    line-height: 60px;
    font-size: 20px;
    margin: 0;
  }
  .explain_content{
    height: 30px;
    margin: 0;
    font-size: 14px;
  }
</style>
